<template>
  <VertifyFrameSet class="login"  @submit="login" :tipShow="tipShow">
    <template v-slot:main>
      <!-- 左边 -->
      <div class="left-side">
        <h1>Vertify<br /> Your Account</h1>
        <div class="h1-att">open access</div>
        <p>
          邮箱和用户名是绑定的，所以你只需要填写邮箱或者用户名，
          即可发送邮件到您的邮箱，通过授权码进行验证和密码双重保证
          安全登入。
        </p>
      </div>
      <!-- 左边 -->

      <!-- 右边 -->
      <div class="right-side">

        <!-- 表单框 -->
        <div class="input-box">
          <div class="input-att">User/Email</div>
          <div class="input"><input type="text" name="vertify" v-model="form.vertify"></div>
        </div>
        <!-- 表单框 -->

        <!-- 验证码 -->
        <div class="input-box">
          <div class="input-att">Code</div>
          <div class="input">
            <InputNumber  type="text"  name="code" v-model="form.code" maxlength="6" />
            <OnceTimingClick
              @timingRun="vertifyUserCode"
             class="code-att" onText="发送验证码" offText="重发时间" :time="6" />
          </div>
        </div>
        <!-- 验证码 -->

        <div class="input-box">
          <div class="input-att">Password</div>
          <div class="input"><input type="text" name="password" v-model="form.password"></div>
        </div>

        <div class="from-att">
          <router-link tag="a" :to="{name: 'Register'}">没有账号？Sign Up</router-link>
        </div>
       
        <!-- 提交按钮 -->
        <div class="submit" @click="login">Login</div>

        <div class="from-att">
          <router-link tag="a" :to="{name: 'FindBack'}" >忘记密码？Find Back</router-link>
        </div>
      </div>
    </template>
    <template v-slot:tipContent>
      <div class="warning-note">

        <div class="tip-text"><span>at present</span>： {{tipText}}</div>

        <div class="warning-title">
          Avoid the following situations <br />
        </div>
        <ul class="hint-box">
          <li class="hint"> 用户名和邮箱都可，但是必须是相互绑定的</li>
          <!-- <li class="hint">The mailbox must be correct, or it will not receive the verification code. 注意要国内的啦</li> -->
          <li class="hint"> 验证码是6位数，有且仅有6位，并且是数字，注意验证码只能在同一个设备有效 </li>
          <!-- <li class="hint">The captcha is a four-digit code with and only four digits</li> -->
          <li class="hint"> 密码最短是6位 </li>
          <!-- <li class="hint">The minimum password is 8 bits</li> -->
        </ul>
        <div class="close-pop-up" @click="tipShow=false">ok</div>
      </div>
    </template>
  </VertifyFrameSet>
</template>

<script>
import { SAVE_USER_INFO } from '__STORE__/operation-type'
import { vertifyUser } from '__SERVICE__/user.js'
import { vertifyUserCode } from '__SERVICE__/email_code.js'
import OnceTimingClick from '__COMPONENTS__/once_timing_click/OnceTimingClick.vue'
import VertifyFrameSet from '__LAYOUTS__/vertify_frame_set/VertifyFrameSet.vue'
import InputNumber from '__COMPONENTS__/input_number/InputNumber.vue'

export default {
  name: 'Login',
  components: {
    VertifyFrameSet,
    OnceTimingClick,
    InputNumber
  },
  data: ()=>({
    tipShow: false,
    form: {
      vertify: '',
      code: '',
      password: ''
    },
    tipText: ''
  }),
  methods: {
    //真正的登入事件
    login() {
      const {vertify, code, password} = this.form
      //用户名
      if(!vertify.length) {
        this.tipText = '用户名或邮箱不能为空'
        this.tipShow = true
        return
      }
      //验证码
      if(code.length < 6) {
        if(!vertify.length) this.tipText = '验证码不能为空'
        else this.tipText = '验证码位数不足'
        this.tipShow = true
        return
      }
      //密码
      if(password.length < 6) {
        this.tipText = '密码小于6位'
        this.tipShow = true
        return
      }

      this.vertifyUser()
    },
    //发送登入验证码
    async vertifyUserCode() {
      this.form.code = '' // 清空code框
      vertifyUserCode(this.form.vertify)
    },
    /* 登入的第一个版本 */
    // async vertifyUser() {
    //   const result = await vertifyUser(this.form)
    //   const {data, status, message} = result
    //   if(status === 'success') {//注册成功
    //     const {user} = data
    //     const {avatar_url, access_token, nickname, id, role_model } = user // 只存储 access_token 和 id
    //     this.$store.dispatch(SAVE_USER_INFO, {
    //       access_token,
    //       user_id: id,
    //       nickname,
    //       avatar_url
    //     })
    //     //跳转回首页
    //     this.$router.push({name: 'Home'})
    //     this.$Notice.success({
    //       title: '登入成功',
    //       desc: `欢迎：${nickname}，您当前的身份是 ${role_model.role_type}`,
    //       duration: '2500'
    //     })
    //   }else if(status === 'error') {//注册失败
    //     const messageType = typeof message
    //     if(messageType === 'string') { //字符串
    //       this.tipText = result.message.replace(/ResponseError: /, '')
    //     }else if('object') {
    //       const targetMessage = message.errors.map((error)=>(error.field)).join(', ') + ' is required'
    //       this.tipText = message.message + '：' + targetMessage
    //     } 
    //     this.tipShow = true
    //   }else {
    //     console.log('服务端返回结果意外')
    //   }
    // },
    async vertifyUser() {
      try {
        const result = await vertifyUser(this.form)
        const {data, message} = result
        const {user} = data
        const {avatar_url, access_token, nickname,motto, id, role_model, email, cover_url, gender } = user // 只存储 access_token 和 id
       
       
        this.$store.dispatch(SAVE_USER_INFO, {
          user_id: id, avatar_url, access_token, nickname, role_model, email, cover_url, gender, motto
        })
        
        //跳转回首页
        this.$router.push({name: 'Home'})
        this.$Notice.success({
          title: '登入成功',
          desc: `欢迎：${nickname}，您当前的身份是 ${role_model.role_type}`,
          duration: '2500'
        })
      }catch(e) {
        const {messageAuthor, message} = e
        this.tipText = message
        this.tipShow = true
      }
    }
  },
  mounted() {

  }
}
</script>

<style>

</style>